<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css">
  <link rel="icon" href="../static/favicon.ico">
</head>
<body>

  <!--导航-->
  <div th:replace="common/blogsHeader :: menu(1)"></div>

  <!--中间内容-->

  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <div class="ui success message">
        <p>[[${message}]]</p>
      </div>
      <form action="/admin/blogs/find" method="post" class="ui secondary segment form">
        <div class="inline fields">
          <div class="field">
            <input type="text" name="title" placeholder="标题">
          </div>
          <div class="field">
            <div class="ui selection dropdown">
              <input type="hidden" name="type">
              <i class="dropdown icon"></i>
              <div class="default text">分类</div>
              <div class="menu" >
                <div th:each="type : ${types}" class="item" data-th-value="type.name">[[${type.name}]]</div>
              </div>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="recommend" name="recommend">
              <label for="recommend">推荐</label>
            </div>
          </div>
          <div class="field">
            <button class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
          </div>
        </div>
      </form>

      <table class="ui compact teal table">
        <thead>
          <tr>
            <th>id</th>
            <th>标题</th>
            <th>类型</th>
            <th>推荐</th>
            <th>更新时间</th>
            <th>是否发布</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="blog :${page.list}">
            <td>[[${blog.id}]]</td>
            <td>[[${blog.title}]]</td>
            <td>[[${blog.type.name}]]</td>
            <td>[[${blog.recommened}]]</td>
            <td>[[${blog.updateTime}]]</td>
            <td>[[${blog.recommened}]]</td>
            <td>
              <a th:href="@{/admin/blogs/input(id=${blog.id})}" class="ui mini teal basic button">编辑</a>
              <a th:href="@{/admin/blogs/delete(id=${blog.id})}" class="ui mini red basic button">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="6">
              <div class="ui mini pagination menu">
                <a class=" item" th:href="@{/admin/blogs(page=${page.hasPreviousPage}?${page.prePage}:1)}">上一页</a>
                <a class=" item" th:href="@{/admin/blogs(page=${page.hasNextPage}?${page.nextPage}:1)}">下一页</a>
              </div>
              <a href="/admin/blogs/input" class="ui mini right floated teal basic button">新增</a>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <br><br>
  <!--底部footer-->
  <div th:replace="common/blogsFooter :: #footer"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

  </script>

</body>
</html>